<template>
  <div class="table">
    <el-table
      :data="tableData"
      border
      row-key="id"
      :row-style="{ height: '40px' }"
      max-height="250"
      size="mini"
    >
      <el-table-column prop="id" label="#"></el-table-column>
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import Sortable from 'sortablejs';
export default {
  data() {
    return {
      tableData: []
    };
  },
  created() {
    this.getdata();
  },
  mounted() {
    this.$nextTick(() => {
      this.rowDrop();
    });
  },
  methods: {
    getdata() {
      for (let i = 0; i < 100; i++) {
        this.tableData.push({
          id: i,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        });
      }
    },
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody');
      // const tbody = document.getElementById('sortable');
      const _this = this;
      Sortable.create(tbody, {
        // ghostClass: 'sghost', //影子，只用这个就可以
        // dragClass: 'sghost', //不定时失效
        //chosenClass: 'schosen',
        animation: 200, // 拖拽延时，效果更好看
        forceFallback: true, // 此项有bug
        scrollSensitivity: 40, //配合forecFallback使用
        // scrollSpeed: 40, // px
        // handle: '.my-handle',
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0];
          _this.tableData.splice(newIndex, 0, currRow);
        }
      });
    }
  }
};

// 测试结束，效果不理想，后期再说
</script>

<style lang="less">
.sghost {
  opacity: 0.2;
  background-color: green !important;
}
.table {
  margin: 100px;
  width: 800px;
}
</style>
